<template>
	<!-- 明细 -->
	<view class="content display  width-100 displayColumn">

		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">推广明细</text>
			</template>
		</u-navbar>

		<!-- 内容 -->
		<view class="fn_withdraw display  width-100 all_item M-T30">
			<view class="fn_withdraw_all display  width-100 displayColumn all_item">
				<span class="fontSize font_comm M-T30">￥<span style="font-size: 44rpx;">{{cash}}</span></span>
				<span class="fontSize font_comm M-T24">可提现余额</span>
				<button class="fontSize font_comm all_item display M-T48" @click="cashout">提现</button>
			</view>
		</view>
		<!-- 切换栏 -->
		<view class="changes display  width-100 all_item M-T36">
			<view class="changes_all display  ">
				<view :class="{fn_item:true, display:true,  displayColumn:true, all_item:true, 'M-L100':index!=0}"
					v-for="(item,index) in arr" :key="index" @click="selectIndex=index">
					<span
						:class="{fontSize:true, font_comm:true, txt1:selectIndex!=index,txt2:selectIndex==index}">{{item}}</span>
					<view class="fn_line display  " style="margin-top: 6rpx;" v-if="selectIndex==index"></view>
				</view>
			</view>
		</view>
		<!-- 时间 -->
		<view class="fn_time display  width-100 M-T24 all_item">
			<view class="fn_time_all display  width_699">
				<view class="fn_one display  displaycenter_aliem">
					<!-- <span class="fontSize font_comm fn_txt1">支出：200</span> -->
					<!-- <span class="fontSize font_comm fn_txt1 M-L50">收入：100</span> -->
				</view>
				<view class="fn_one display  displaycenter_aliem" @click="selectTime">
					<span class="fontSize font_comm fn_txt1 M-R8">{{time}}</span>
					<uni-icons type="right" color="#72778A" size="14"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<scroll-view id="ceshi" scroll-y="true" class="scroll-Y" :style="{height: scrollHeight,marginTop:'20rpx'}"
			@scrolltolower="scrolltolower">
			<view class="fn_list display  width-100 displayColumn all_item M-T24">
				<block v-for="(item,index) in arr1" :key="index">
					<listCard :item="item"></listCard>
				</block>
			</view>
			<view class="display width-100" style="height: 100rpx;">

			</view>
		</scroll-view>
		<!-- 时间选择器 -->
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="date" :minDate="1587524800000"
			:maxDate="1786778555000" defaultIndex='[0,0,0]' @confirm="confirm" @cancel="cancle"></u-datetime-picker>
	</view>
</template>
<script>
	import listCard from './components/list.vue'
	export default {

		components: {
			listCard
		},
		data() {
			return {
				selectIndex: 0, //全部收入支出  默认为全部
				arr: ['全部', '收入', '支出'],
				show: false,
				value1: '',
				time: '2024-10-11',
				cash: '',
				arr1: [],
				scrollHeight: '90vh',
				pageSize: 10,
				pageNum: 1,
				total: 10,
				flag: 1, //1代表可以请求  0代表不可请求
			}
		},
		watch: {
			selectIndex(newVal, oldVal) {
				this.flag = 1;
				this.pageNum = 1;
				this.arr1 = [];
				console.log(newVal)
				this.getList();
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter);
			const that = this
			this.$nextTick(() => {
				uni.getSystemInfo({
					success: function(res) {
						const query = wx.createSelectorQuery()
						query.select('#ceshi').boundingClientRect()
						// 获取滚动容器css数据
						query.exec((resData) => {
							console.log(resData)
							if (resData && resData.length) {
								// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
								that.scrollHeight = (res.windowHeight - resData[0].top) * 2 +
									'rpx'
								console.log(that.scrollHeight)
							}
						})
					},
				})
			})
		},
		onLoad(options) {
			this.cash = options.cash;
			// 获取列表
			this.getList();
		},
		methods: {
			scrolltolower() {
				this.pageNum++;
				// console.log(this.pageNum)
				this.getList();
			},
			getList(time) {
				if (this.flag == 0) {
					return
				}
				this.$modal.loading('加载中');
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					inExType: this.selectIndex == 0 ? '' : this.selectIndex == 1 ? 0 : 1,
					endTime:time|| ''
				}
				
				 console.log(data)
				this.$req.get('/xcx/userExtendWalletLog/list', data).then(res => {
					this.total = res.data.total;
					this.$modal.closeLoading();
					if (res.data.code == 200) {
						// console.log(res)
						this.arr1 = this.arr1.concat(res.data.rows);
						if (this.arr1.length == this.total) {
							this.flag = 0
						}
					} else {
						this.$modal.msg(res.data.msg);
					}
				})
			},
			back() {
				uni.navigateBack();
			},
			// 选择时间
			selectTime() {
				this.show = true;
			},
			confirm(e) {
				this.flag = 1;
				this.pageNum = 1;
				this.arr1 = [];
				console.log(e)
				this.time = uni.$u.date(e.value, 'yyyy-mm-dd')
				// 请求接口
				this.getList(this.time);
				this.show = false;
			},
			cancle() {
				this.show = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			// 体现
			cashout() {
				this.$tab.navigateTo('/packageC/lossechange/lossechange?cash='+this.cash)
			}
		}
	}
</script>
<style>
	page {
		background: #F4F5FA;
	}
</style>
<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
	}

	.title {
		font-weight: 600;
		color: #212121;
		font-size: 32rpx;
	}

	.fn_withdraw_all {
		width: 690rpx;
		height: 270rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		:nth-child(1) {
			font-weight: 600;
			font-size: 24rpx;
			color: #FF672D;
		}

		:nth-child(2) {
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
		}

		:nth-child(3) {
			width: 152rpx;
			height: 62rpx;
			background: #126BC9;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-weight: 600;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.changes_all {
		width: 690rpx;


	}

	.txt1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A
	}

	.txt2 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_line {
		width: 36rpx;
		height: 6rpx;
		background: #126BC9;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}

	.fn_time_all {
		justify-content: space-between;

		.fn_txt1 {
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
		}
	}
</style>